<template>
    <div class="swiper-container imgConta swiper-no-swiping">
        <div class="swiper-wrapper">
            <img class="swiper-slide"   src="../../../assets/swiper/1e29f87bd22e33dc38cf6edbd03b8e99689fba94.jpg" /> 
            <img class="swiper-slide"   src="../../../assets/swiper/a455c5a9c6733887b2f55fc6f042d5f7ef81b576.png" /> 
            <img class="swiper-slide"   src="../../../assets/swiper/90db0af2d03ee6cfa562e8f43adf5d591abc6160.png" />
            <img class="swiper-slide"   src="../../../assets/swiper/fd3bffd277ae6c868b55d8d7600c8989fb290c33.png" />
            <img class="swiper-slide"   src="../../../assets/swiper/f3e406b5c20c50a37dbbb022d5d56fb6df66a57e.jpg" />
            <img class="swiper-slide"   src="../../../assets/swiper/7be85c8d7f110fa363ee40c1cb03ca10dabeaf82.jpg" />
            <img class="swiper-slide"   src="../../../assets/swiper/81a36a478ad24f69e76867d42beb62135685a42d.jpg" />
            <img class="swiper-slide"   src="../../../assets/swiper/8d0e6f9f1ed8ea8dbe2b36ba460762a66100b2a1.png" />
            <img class="swiper-slide"   src="../../../assets/swiper/059992e724a272e037746eea5eb476abf96948db.png" />
        </div>
    </div>

    <div class="img-bottom-mask" :style="countImgBottomColor">
        <div class="swiper-pagination"></div>
        <div style="width: 20%;height: 100%;display: flex;justify-content: space-between;align-items: center;">
            <button  class="swiper-prev" @click="onPrcvSwiper"><el-icon><ArrowLeftBold /></el-icon></button>
            <button  class="swiper-next" ><el-icon><ArrowRightBold /></el-icon></button>
        </div>
    </div>
  
</template>

<script>
import swiper from 'swiper'
import { onMounted,nextTick,getCurrentInstance,reactive,computed,toRaw } from 'vue'
import { avgColor } from '@/assets/json/swiperBottomColor.js'
export default {
    setup(){

        let status = reactive({
            imgBottonMaskColor:'',
            swipers:'',
            isClickPrev:false
        })
        onMounted(()=>{
            initSwiper();
            nextTick(()=>{
                let url = toRaw(status.swipers).wrapperEl.children[1].currentSrc.slice(40);
                getImgBottomColor(url);
            })
           

        })
        function initSwiper(){
            status.swipers = new swiper('.swiper-container', {
            autoplay:{
                delay:3000,
                disableOnInteraction: false,
            },
            navigation: {
                    nextEl: '.swiper-next',
                    prevEl: '.swiper-prev',
            },
            pagination:{
                el:'.swiper-pagination',
                clickable :true,
                bulletClass : 'my-bullet',
                bulletActiveClass: 'my-bullet-active',
            },
            loop:true,
            on:{
                slideChangeTransitionStart:function(){
                    let datas=toRaw(status.swipers)
                    if(datas.pagination != undefined){
                        if(datas.realIndex == 0){
                            datas.pagination.bullets[8].className="my-bullet"
                        }else{
                            datas.pagination.bullets[datas.realIndex-1].className="my-bullet"
                        }
                    }
                    let url = null
                    if(datas != '')  url = datas.wrapperEl.children[status.swipers.activeIndex].currentSrc.slice(40)
                    getImgBottomColor(url);
                },
            },
            
            
            });
        }
        function onPrcvSwiper(){
            let datas=toRaw(status.swipers)
            if(datas.realIndex == 0){
                datas.pagination.bullets[0].className="my-bullet";
                datas.pagination.bullets[8].className="my-bullet my-bullet-prev-active";
            }else{
                datas.pagination.bullets[datas.realIndex].className="my-bullet";
                datas.pagination.bullets[datas.realIndex-1].className="my-bullet my-bullet-prev-active";
            }
        }

        const {proxy} = getCurrentInstance();
        function getImgBottomColor(title){
            if (!title) title = 'a455c5a9c6733887b2f55fc6f042d5f7ef81b576.png'
            const colors =  avgColor.find(el => el.title === title )
            status.imgBottonMaskColor = colors.RGB
        }
        const countImgBottomColor = computed(()=>{
            return {
                '--myColor':status.imgBottonMaskColor
            }
        })

        return{
            status,
            countImgBottomColor,
            onPrcvSwiper,
        }
    }
}
</script>

<style lang="scss">
.imgConta{
    width: 100%;
    height: 100%;
    display: flex;
}
.img-bottom-mask{
    position: relative;
    width: 100%;
    height: 100px;
    background-color: var(--myColor);
    box-shadow: 0px -35px 24px var(--myColor);
    z-index: 99;
    display: flex;
    overflow: hidden;
   
}
.swiper-pagination{
    margin-left: 10px;
    width: 30%;
    height: 100%;
    text-align: left;
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.my-bullet{
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #808e9b;
}
.my-bullet-active{
    background-color: white;
    width: 17px;
    height: 17px;
    border-radius: 100%;
    animation-name: identifier;
    animation-duration: .4s;
    animation-iteration-count: 2;
}
.my-bullet-prev-active{
    background-color: white;
    width: 17px;
    height: 17px;
    border-radius: 100%;
    animation-name: identifier2;
    animation-duration: .4s;
    animation-iteration-count: 2;
}
.swiper-next{
    position: absolute;
    padding: 0;
    width: 25px;
    height: 25px;
    right: 30px;
    border-radius:4px ;
    background-color: rgb(205, 208, 214,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    &:focus{
        border: none;
        outline: none;
    }
    &:hover{
        border: .5px #CDD0D6;
    }
    
}
.swiper-prev{
    position: absolute;
    padding: 0;
    width: 25px;
    height: 25px;
    right: 60px;
    border-radius:4px ;
    background-color: rgb(205, 208, 214,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border: none;
    &:hover{
        border: .5px #CDD0D6;
    }
    &:focus{
        border: none;
        outline: none;
    }
}
@keyframes identifier {
    0%{
        clip-path:  polygon(0 0,100% 0,100% 50%,50% 50%,100% 50%,100% 100%,0 100%);
    }
    50%{
        clip-path:  polygon(0 0,100% 0%,100% 5%,50% 50%,100% 95%,100% 100%, 0 100%);
    }
    from{
        clip-path:  polygon(0 0,100% 0,100% 50%,50% 50%,100% 50%,100% 100%,0 100%);
    }
}
@keyframes identifier2 {
    0%{
        clip-path:  polygon(0 0,0 50%,0 50%,50% 50%,0 50%,0 100%,100% 100%,100% 0);
    }
    50%{
        clip-path:  polygon(0 0,0 50%,0 10%,50% 50%,0 80%,0 100%,100% 100%,100% 0);
    }
    from{
        clip-path:  polygon(0 0,0 50%,0 50%,50% 50%,0 50%,0 100%,100% 100%,100% 0);
    }
}
</style>